<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="order-detail-container">
			<!-- 商品轮播图 -->
			<view class="swiper-wrapper">
				<swiper class="product-swiper" circular indicator-dots autoplay :interval="3000" :duration="500">
					<swiper-item v-for="(swiper, index) in detail.photo.split(',')" :key="index">
						<image class="swiper-image" :src="_imgUrl + swiper" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 商品信息 -->
			<view class="product-card">
				<view class="product-header">
					<text class="product-title">{{ detail.shangpinmingcheng }}</text>
				</view>

				<!-- 订单详情 -->
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">订单编号</text>
						<text class="info-value">{{ detail.id }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">价格</text>
						<text class="info-value highlight">¥{{ detail.price }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">数量</text>
						<text class="info-value">{{ detail.spNumber }}件</text>
					</view>
					<view class="info-item">
						<text class="info-label">总金额</text>
						<text class="info-value highlight">¥{{ detail.price * detail.spNumber }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">购买日期</text>
						<text class="info-value">{{ detail.createTime }}</text>
					</view>
					<view class="info-item" v-if="detail.remark">
						<text class="info-label">退款理由</text>
						<text class="info-value">{{ detail.remark }}</text>
					</view>
				</view>

				<!-- 用户信息 -->
				<view class="user-section">
					<!-- <view class="user-info">
            <text class="user-label">农户信息</text>
            <text class="user-text">{{detail.nonghuzhanghao}} {{detail.nonghuxingming}}</text>
          </view> -->
					<view class="user-info">
						<!-- <text class="user-label">收货信息</text>
            <text class="user-text">{{detail.yonghuming}} {{detail.shoujihaoma}}</text>
            <text class="user-text address">{{detail.shouhuodizhi}}</text> -->
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">

				<button
					v-if="detail.status != '已发货' && detail.status != '已退货' && detail.status != '已送达' && detail.status != '已退款' && roles !== 'yonghu'"
					class="action-btn secondary" @tap="onAcrossTap('dingdanpeisong')">发货</button>
				<button v-if="detail.status == '已发货' && detail.status != '已退款' && roles == 'yonghu'"
					class="action-btn secondary" @tap="onAcrossTap('fahuo')">送达</button>
				<button v-if="detail.status == '已发货'"
					class="action-btn warn" @tap="onAcrossTap('已退货')">退货</button>
				<!-- @tap="onAcrossTap('已退款')" -->
				<button v-if="detail.status == '已送达' && roles == 'yonghu'"" class="action-btn warn" @tap="showRefundDialog">申请退款</button>
				<button v-if="detail.status == '申请退款'" class="action-btn warn"@tap="onAcrossTap('已确认退款')">确认退款</button>
				<button v-if="detail.status == '申请退款'" class="action-btn warn"@tap="onAcrossTap('已拒绝退款')">拒绝退款</button>
				<button class="action-btn status " >{{ detail.status || '进行中' }}</button>
			</view>
		</view>

		<!-- 审核弹窗 -->
		<uni-popup ref="popup" type="center" class="audit-popup">
			<view class="audit-content">
				<text class="audit-title">订单审核</text>
				<picker class="audit-picker" @change="sfshChange" :value="sfshIndex" :range="sfshOptions">
					<view class="picker-content">
						{{ detail.sfsh || '选择审核结果' }}
						<text class="cuIcon-unfold"></text>
					</view>
				</picker>
				<textarea class="audit-input" v-model="detail.shhf" placeholder="请输入审核意见"></textarea>
				<view class="audit-buttons">
					<button class="audit-btn cancel" @tap="onCloseWinTap">取消</button>
					<button class="audit-btn confirm" @tap="onFinishTap">提交</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="refundPopup" type="center" class="audit-popup">
			<view class="audit-content">
				<text class="audit-title">填写退款原因</text>
				<textarea class="audit-input" v-model="refundReason" placeholder="请输入退款原因"></textarea>
				<view class="audit-buttons">
					<button class="audit-btn cancel" @tap="hideRefundDialog">取消</button>
					<button class="audit-btn confirm" @tap="onAcrossTap('申请退款')">确认退款</button>
				</view>
			</view>
		</uni-popup>
	</mescroll-uni>

</template>

<script>
export default {
	data() {
		return {
			autoplaySwiper: {
				"delay": 5000,
				"disableOnInteraction": false
			} ? true : false,
			intervalSwiper: {
				"delay": 5000,
				"disableOnInteraction": false
			} ? 5000 : 5000,
			btnColor: ['#409eff', '#67c23a', '#909399', '#e6a23c', '#f56c6c', '#356c6c', '#351c6c', '#f093a9',
				'#a7c23a', '#104eff', '#10441f', '#a21233', '#503319'
			],
			id: '',
			detail: {},
			swiperList: [],
			commentList: [],
			mescroll: null, //mescroll实例对象
			downOption: {
				auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			upOption: {
				noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textNoMore: '~ 没有更多了 ~',
			},
			hasNext: true,
			user: {},
			sfshIndex: -1,
			sfshOptions: ['通过', '不通过'],
			count: 0,
			roles: '',
			_imgUrl: '',
			refundReason: '',
		}
	},
	computed: {
		SecondToDate: function () {
			var time = this.count;
			if (null != time && "" != time) {
				if (time > 60 && time < 60 * 60) {
					time =
						parseInt(time / 60.0) +
						"分钟" +
						parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) +
						"秒";
				} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
					time =
						parseInt(time / 3600.0) +
						"小时" +
						parseInt(
							(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
						) +
						"分钟" +
						parseInt(
							(parseFloat(
								(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
							) -
								parseInt(
									(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
								)) *
							60
						) +
						"秒";
				} else if (time >= 60 * 60 * 24) {
					time =
						parseInt(time / 3600.0 / 24) +
						"天" +
						parseInt(
							(parseFloat(time / 3600.0 / 24) - parseInt(time / 3600.0 / 24)) *
							24
						) +
						"小时" +
						parseInt(
							(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
						) +
						"分钟" +
						parseInt(
							(parseFloat(
								(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
							) -
								parseInt(
									(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
								)) *
							60
						) +
						"秒";
				} else {
					time = parseInt(time) + "秒";
				}
			}
			return time;
		}
	},
	async onLoad(options) {
		this.id = options.id;
	},
	async onShow(options) {
		// 渲染数据
		this._imgUrl = this.$base.url
		this.init();
		let table = uni.getStorageSync("nowTable");
		this.roles = uni.getStorageSync("roles")
		console.log('this.roles', this.roles);

		// 获取用户信息
		let res = await this.$api.session(table);
		this.user = res.data;
		this.btnColor = this.btnColor.sort(() => {
			return (0.5 - Math.random());
		});
	},
	destroyed: function () {
		window.clearInterval(this.inter);
	},
	methods: {
		// 支付
		onPayTap() {
			uni.setStorageSync('paytable', 'dingdanxinxi');
			uni.setStorageSync('payObject', this.detail);
			this.$utils.jump('../pay-confirm/pay-confirm?type=1')
		},
		showRefundDialog() {
			this.$refs.refundPopup.open();
		},
		hideRefundDialog() {
			this.refundReason = '';
			this.$refs.refundPopup.close();
		},
		// 收藏
		// 跨表
		async onAcrossTap(tableName) {
			// uni.setStorageSync('crossTable', 'dingdanxinxi');
			// uni.setStorageSync(`crossObj`, this.detail);
			// this.$utils.jump(`../${tableName}/add-or-update?cross=true`);

			if (tableName == 'dingdanpeisong') {
				let res = await this.$api.update('order', {
					id: this.id,
					status: '已发货'
				});
				if (res.code == 200) {
					this.init()
					uni.showToast({
						title: '已发货'
					})
					uni.navigateBack()
				}
			} else if (tableName == 'fahuo') {
				let res = await this.$api.update('order', {
					id: this.id,
					status: '已送达',
					
				});
				
				
				if (res.code == 200) {
					this.init()
					uni.showToast({
						title: '已送达'
					})
					this.refundReason = '';
					this.$refs.refundPopup.close();
					uni.navigateBack()
				}

			} else {
				console.log('tableName', tableName);

				let res = await this.$api.update('order', {
					id: this.id,
					status: tableName,
					remark: this.refundReason || this.detail.remark
				});
				console.log('refundReason', this.refundReason);
				if (res.code == 200) {
					this.init()
					uni.showToast({
						title: tableName
					})
					uni.navigateBack()
				}
			}
		},
		// 获取详情
		async init() {
			let res = await this.$api.info('order', this.id);
			this.detail = res.data;
			// 轮播图片
			this.swiperList = this.detail.tupian ? this.detail.tupian.split(",") : [];
		},

		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},

		/*下拉刷新的回调 */
		downCallback(mescroll) {
			this.hasNext = true
			mescroll.resetUpScroll()
		},

		/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
		async upCallback(mescroll) {
			mescroll.endSuccess(mescroll.size, this.hasNext);

		},

		onChatTap() {
			this.$utils.jump('../chat/chat')
		},
		// 下载
		download(url) {
			let _this = this;
			uni.downloadFile({
				url: url,
				success: (res) => {
					if (res.statusCode === 200) {
						_this.$utils.msg('下载成功');
						window.open(url);
					}
				}
			});
		},
		// 
		onCartTabTap() {
			this.$utils.tab('../shop-cart/shop-cart')
		},
		// 添加评论
		onCommentTap() {
			this.$utils.jump(`../discussdingdanxinxi/add-or-update?refid=${this.id}`)
		},
		// 点赞
		async zan() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '是否点赞',
				success: async function (res) {
					if (res.confirm) {
						_this.detail.thumbsupnum = parseInt(_this.detail.thumbsupnum) + 1;
						await _this.$api.update('dingdanxinxi', _this.detail);
						_this.$utils.msg('点赞成功');
					}
				}
			});
		},
		// 踩
		async cai() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '是否点踩',
				success: async function (res) {
					if (res.confirm) {
						_this.detail.crazilynum = parseInt(_this.detail.crazilynum) + 1;
						await _this.$api.update('dingdanxinxi', _this.detail);
						_this.$utils.msg('点踩成功');
					}
				}
			});
		},
		onSHTap() {
			this.$refs.popup.open()
		},
		// 完成审核
		async onFinishTap() {
			if (!this.detail.sfsh) {
				this.$utils.msg('请选择审核状态');
				return
			}
			if (!this.detail.shhf) {
				this.$utils.msg('请填写审核回复');
				return
			}
			if (this.detail.sfsh == "通过") {
				this.detail.sfsh = '是'
			}
			if (this.detail.sfsh == "不通过") {
				this.detail.sfsh = '否'
			}
			await this.$api.update('dingdanxinxi', this.detail);
			this.$utils.msg('审核成功');
			this.$refs.popup.close();
		},
		// 关闭窗口
		onCloseWinTap() {
			this.$refs.popup.close()
		},
		sfshChange(e) {
			console.log(this.detail)
			this.sfshIndex = e.target.value
			this.detail.sfsh = this.sfshOptions[this.sfshIndex]
		}
	}
}
</script>
<style lang="scss" scoped>
.order-detail-container {
	background: #f8f9ff;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.swiper-wrapper {
	padding: 32rpx;

	.product-swiper {
		height: 560rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.2);

		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}
}

.product-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 0 32rpx;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);
}

.product-header {
	padding-bottom: 32rpx;
	border-bottom: 1rpx solid #f1f3fe;

	.product-title {
		font-size: 36rpx;
		color: #2d3748;
		font-weight: 600;
		line-height: 1.4;
	}
}

.info-list {
	padding: 32rpx 0;

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;

		.info-label {
			color: #718096;
			font-size: 28rpx;
			min-width: 160rpx;
		}

		.info-value {
			color: #2d3748;
			font-size: 28rpx;
			text-align: right;
			flex: 1;

			&.highlight {
				color: #667eea;
				font-weight: 600;
			}
		}
	}
}

.user-section {
	border-top: 1rpx solid #f1f3fe;
	padding-top: 32rpx;

	.user-info {
		margin-bottom: 24rpx;

		.user-label {
			display: block;
			color: #667eea;
			font-size: 28rpx;
			margin-bottom: 16rpx;
		}

		.user-text {
			color: #4a5568;
			font-size: 28rpx;
			line-height: 1.6;

			&.address {
				color: #718096;
			}
		}
	}
}

.action-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	padding: 24rpx 32rpx;
	display: flex;
	gap: 24rpx;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 48rpx;
		font-size: 28rpx;
		transition: all 0.2s;

		&.pay-btn {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
		}

		&.secondary {
			background: rgba(102, 126, 234, 0.1);
			color: #667eea;
		}

		&.status {
			background: linear-gradient(135deg, #abd3bd, #8ce2b3);
			color: #0ba550;


		}

		&.warn {
			background: rgba(255, 71, 87, 0.1);
			color: #ff4757;
		}

		&.disabled,
		&.paid {
			background: #e2e8f0;
			color: #a0aec0;
		}
	}
}

.audit-popup {
	.audit-content {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24rpx;
		padding: 48rpx;
		width: 600rpx;

		.audit-title {
			font-size: 32rpx;
			color: #2d3748;
			text-align: center;
			margin-bottom: 48rpx;
		}

		.audit-picker {
			.picker-content {
				background: #f8f9ff;
				border-radius: 48rpx;
				padding: 24rpx 32rpx;
				color: #667eea;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.audit-input {
			width: 100%;
			height: 200rpx;
			background: #f8f9ff;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin: 32rpx 0;
			font-size: 28rpx;
		}

		.audit-buttons {
			display: flex;
			gap: 32rpx;

			.audit-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;

				&.cancel {
					background: #f1f3fe;
					color: #667eea;
				}

				&.confirm {
					background: linear-gradient(135deg, #667eea, #764ba2);
					color: white;
				}
			}
		}
	}
}
</style>